<div class="container">
  <!-- SURVEY NAME -->
  <div class="row">
    <div id="content" class="col-lg-12">
      <div class="row">
        <div class="col-md-12">
          <div class="page-header" style="min-height:50px;">
            <ul class="breadcrumb">
              <li><h5>Tên khảo sát:</h5></li>
              <li>
                <span id='projectName'><strong><?php echo $projectName['0']['survey_name'];?></strong></span>
                <span id='editProject'  class="input-append" style="display:none;">
                  <input class="form-control" id="<?php echo $projectName['0']['survey_id'];?>" type="text" name="editProject" value="<?php echo $projectName['0']['survey_name'];?>">
                  <span class="input-group-btn">
                    <button class="btn btn-primary" type="button" id="edit" onclick="Survey.editProject(); return false;">
                      <i class="fa fa-edit"></i>
                      Sửa
                    </button>
                  </span>
                </span>
                <button class="btn btn-info btn-xs" id="edit-sur" style="cursor:pointer;color:#205081;" onclick="Survey.preEditProject(); return false;">&nbsp;&nbsp;<i class="fa fa-pencil-square-o"></i>Sửa</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- /SURVEY NAME -->
      <!-- CONTENT PAGE -->
      <div class="row">
        <div class = "col-md-12">
          <div class = "box border orange">
            <div class = "box-title">
              <h4>1. Trang nội dung.</h4>
              <div class="tools hidden-xs">
                <a href=""><i class="fa fa-search"></i> Xem trước</a>
                <a href="">&nbsp;<i class="fa fa-wrench"></i> Thiết lập</a>
                <a href="">&nbsp;<i class="fa fa-file"></i> Sao chép</a>
              </div>
            </div>
            <div class="box-body">
              <div id='content-survey' class="content-question">
                <div class="loading"></div>
                <ol id="sort_question">
                 <li class="placeholder">
                    <div>Bạn chưa tạo câu hỏi nào!</div>
                  </li>
                  <script>
                    $(document).ready(function(){
                      Survey.listQuestion(<?=$projectName[0]['survey_id']?>);
                    })
                  </script>
                </ol>
              </div>
            </div>

          </div>
        </div>
      </div>
      <!-- CONTENT PAGE -->
    <div style = "margin-bottom:30px;"><a href="" class="btn btn-primary"><i class="fa fa-plus"></i>Thêm trang mới</a></div>
    <!-- THANK YOU PAGE -->
      <div class="row">
        <div class = "col-md-12">
          <div class = "box border blue">
            <div class = "box-title">
              <h4>1. Trang cảm ơn.</h4>
              <div class="tools hidden-xs">
                <a href=""><i class="fa fa-search"></i> Xem trước</a>
                <a href="">&nbsp;<i class="fa fa-wrench"></i> Thiết lập</a>
              </div>
            </div>
            <div class="box-body">
              <div id='content-survey' class="content-question">
                <div class="row">
                  <div class="col-md-2">
                    <div class="well">
                      <p><a href=""><i class="fa fa-pencil"></i> Sửa</a></p>
                      <p><a href=""><i class="fa fa-move"></i> Di chuyển</a></p>
                      <p><a href=""><i class="fa fa-file"></i> Sao chép</a></p>
                      <p><a href=""><i class="fa fa-trash-o"></i> Xóa</a></p>
                    </div>
                  </div>
                  <div class="col-md-9">
                    <p>Cảm ơn bạn đã tham gia khảo sát, phản hồi của bạn là rất quan trọng cho chúng tôi.</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <!-- THANK YOU PAGE -->
    </div>

    </div>
  </div>
  <script>
    jQuery(document).ready(function() {  
      App.setPage("create-survey");  //Set current page
      App.init(); //Initialise plugins and elements
    

    
    $( "#drag-control li" ).draggable({
      appendTo: "body",
      helper: "clone",
      cancel: "a.ui-icon",
      cursor: 'move'
      }
      
    );
  
    $( "#content-survey ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      cursor: 'move',
      drop: function( event, ui ) {
        var id = ui.draggable.attr("id");
        var projectId = '<?php echo $this->uri->segment(2);?>';
        window.location.href = 'them/'+projectId+'/'+id;
      }
    }).sortable({
      items: "li:not(.placeholder)",
      cursor: 'move',
      update: function() {
        $( this ).removeClass( "ui-state-default" );
        $.ajax(
        {
             type: "POST",
             url: "<?php echo site_url('member/createSurvey/ajaxSortQuestion');?>", 
             data: $('#sort_question').sortable('serialize'), 
             cache: false,       
             success: function(data){
               
             }
         });
      }
    });
});
  </script>
<!--
 <div class="breadLine">
      <div class="bc">
        <ul id="breadcrumbs" class="breadcrumbs unstyled inline">
          <li>Tên khảo sát:</li>
          <li>
            <span id='projectName'><strong><?php echo $projectName['0']['survey_name'];?></strong></span>
            <span id='editProject'  class="input-append" style="display:none;">
              <input id="<?php echo $projectName['0']['survey_id'];?>" type="text" name="editProject" value="<?php echo $projectName['0']['survey_name'];?>">
              <button class="btn btn-primary" type="button" id="edit" onclick="Survey.editProject(); return false;">Sửa</button>
            </span>
            <span id="edit-sur" style="cursor:pointer;color:#205081;" onclick="Survey.preEditProject(); return false;">&nbsp;&nbsp;<i class="icon-pencil"></i>Sửa</span>
          </li>
        </ul>
      </div>
      <div class="breadLinks">
        <ul class="unstyled inline">
          <li>
            <a title="" href="#">
              <i class="icon-check"></i>
              <span>Hiển thị cơ bản</span>
            </a>
          </li>
          <li>
            <a title="" href="#">
              <i class="icon-th-list"></i>
              <span>Danh sách</span>
            </a>
          </li>
          <li>
            <a title="">
              <i class="icon-th-large"></i>
              <span>Lưới</span>
            </a>
          </li>
          <li>
            <a title="">
              <i class="icon-tasks"></i>
              <span>Cao cấp</span>
            </a>
          </li>
        </ul>
        <div class="clear"></div>
      </div>
  </div>

  <!-- question content 
  <section class="social-box" style="margin-top:30px;">
    <header class="header">
      <div class="row-fluid">
        <div class="span6">
          <h4>1. Trang nội dung</h4>
        </div>
        <div class="span6 text-right">
          <ul class="unstyled inline" style="margin-top:5px;margin-bottom:-5px;">
            <li><a href=""><i class="icon-search"></i> <small>Xem trước</small></a></li>
            <li><a href=""><small>&nbsp;<i class="icon-wrench"></i> Thiết lập</small></a></li>
            <li><a href=""><small>&nbsp;<i class="icon-file"></i>Sao chép</small></a></li>
          </ul>
        </div>
      </div>
      
    </header>
    <div class="body">
      <div id='content-survey' class="content-question">
        <div class="loading"></div>
        <ol id="sort_question">
         <li class="placeholder">
            <div>Bạn chưa tạo câu hỏi nào!</div>
          </li>
          <script>
            $(document).ready(function(){
              Survey.listQuestion(<?=$projectName[0]['survey_id']?>);
            })
          </script>
        </ol>
      </div>
    </div>
  </section>
  <div class='btn-new-page'><a href="" class="btn-ksv"><i class="icon-plus icon-white"></i>Thêm trang mới</a></div>

<!-- thank you =====================
      ====================================-
  <section class="social-box" style="margin-top:30px;">
    <header class="header">
      <div class="row-fluid">
        <div class="span6">
          <h4>2. Trang cảm ơn</h4>
        </div>
        <div class="span6 text-right">
          <ul class="unstyled inline" style="margin-top:5px;margin-bottom:-5px;">
            <li><a href=""><i class="icon-search"></i> <small>Xem trước</small></a></li>
            <li><a href=""><small>&nbsp;<i class="icon-wrench"></i> Thiết lập</small></a></li>
            <li><a href=""><small>&nbsp;<i class="icon-file"></i>Sao chép</small></a></li>
          </ul>
        </div>
      </div>
      
    </header>
    <div class="body">
      <div id='content-survey' class="content-question">
        <div class="row-fluid">
                <hr>
                <div class="span2">
                  <div class="well">
                    <p><a href=""><i class="icon-pencil"></i> Sửa</a></p>
                    <p><a href=""><i class="icon-move"></i> Di chuyển</a></p>
                    <p><a href=""><i class="icon-file"></i> Sao chép</a></p>
                    <p><a href=""><i class="icon-remove"></i> Xóa</a></p>
                  </div>
                </div>
                <div class="span9">
                  <p>Cảm ơn bạn đã tham gia khảo sát, phản hồi của bạn là rất quan trọng cho chúng tôi.</p>
                </div>
              </div>
      </div>
    </div>
  </section>

 
      
   

<!--
      <div class=" thanks well">
        <div class="head-thanks">
          <div class="row-fluid">
            <div class="span6"><a href="" class="edit-sur">2. Trang cảm ơn</a></div>
            <div class="span6 text-right">
              <a href=""><i class="icon-search icon-white"></i> <small>Xem trước&nbsp;&nbsp;|</small></a>
              <a href=""><small>&nbsp;<i class="icon-wrench icon-white"></i> Thiết lập</small></a>
            </div>
          </div>
        </div>
        <div class="content-thank">
          <div class="row-fluid">
            <hr>
            <div class="span2">
              <div class="well">
                <p><a href=""><i class="icon-pencil"></i> Sửa</a></p>
                <p><a href=""><i class="icon-move"></i> Di chuyển</a></p>
                <p><a href=""><i class="icon-file"></i> Sao chép</a></p>
                <p><a href=""><i class="icon-remove"></i> Xóa</a></p>
              </div>
            </div>
            <div class="span9">
              <p>Cảm ơn bạn đã tham gia khảo sát, phản hồi của bạn là rất quan trọng cho chúng tôi.</p>
            </div>
          </div>
        </div>
        <div class="bottom-question">
          <div class="row-fluid">
            <div class="span8">
              <a href=""><i class="icon-plus"></i> Thêm hành động&nbsp;&nbsp;|</a>
              <a href="">&nbsp;<i class="icon-retweet"></i> Thêm tương tác&nbsp;&nbsp;|</a>
              <a href="">&nbsp;<i class="icon-envelope"></i> Thêm người phản hồi Email</a>
            </div>
            <div class="span4 text-right">
              <a href=""><i class="icon-picture"></i> Thêm văn bản đa phương tiện</a>
            </div>
          </div>
        </div>
      </div>
    </div> 
  
  <script>
  $(function() {
    
    $( "#drag-control li" ).draggable({
      appendTo: "body",
      helper: "clone",
      cancel: "a.ui-icon",
      cursor: 'move'
      }
      
    );
  
    $( "#content-survey ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      cursor: 'move',
      drop: function( event, ui ) {
        var id = ui.draggable.attr("id");
        var projectId = '<?php echo $this->uri->segment(2);?>';
        window.location.href = 'them/'+projectId+'/'+id;
      }
    }).sortable({
      items: "li:not(.placeholder)",
      cursor: 'move',
      update: function() {
        $( this ).removeClass( "ui-state-default" );
        $.ajax(
        {
             type: "POST",
             url: "<?php echo site_url('member/createSurvey/ajaxSortQuestion');?>", 
             data: $('#sort_question').sortable('serialize'), 
             cache: false,       
             success: function(data){
               
             }
         });
      }
    });
  });
</script>

<!-- popup del
<div id="alert-del" class="modal hide" style="left: 65%; width: 400px;top:20%;">
    <div class="modal-header">
        <a href="#" data-dismiss="modal" aria-hidden="true" class="close">×</a>
         <h3>Xóa câu hỏi</h3>
    </div>
    <div class="modal-body">
        <p><img src="<?php echo base_url();?>media/DeleteRed40.png" alt="Xóa câu hỏi" align="left">
        Dữ liệu bị <span style="color:red;">xóa</span> sẽ không thể khôi phục lại.<br> Bạn vẫn muốn xóa câu hỏi này?</p>
    </div>
    <div class="modal-footer">

      <a href="javascript:void(0)" data-dismiss="modal" aria-hidden="true" class="btn secondary"><span class="btn-no">Không</span></a>
      <a href="javascript:void(0)" id="btnYes" class="btn secondary"><span class="btn-yes"><b>Có</b></span></a>
    </div>
</div>


<!-- popup text editor
<div id="editor-popup" class="modal hide" style="left: 50%; width: 700px;padding:10px;">
  <div class="modal-header">
        <a href="#" data-dismiss="modal" aria-hidden="true" class="close">×</a>
         <h3>Trình soạn thảo</h3>
    </div>
<div class='navbar'><div id="toolbar"></div></div>
 <!-- <script>$(document).ready(function() {
    $('#content-editor').freshereditor({toolbar_selector: "#toolbar", excludes: ['removeFormat', 'insertheading4']});
    $("#content-editor").freshereditor("edit", true);
  });
  </script>
  <div id="wrapper">
    <div id="content-editor" class="title-editor clear">
      Nội dung...  
    </div>
  </div>
  <div class="pull-right" style = "margin-top:10px;">
    <button id="btnok" class="btn secondary"><span class="btn-yes"><b>Chọn</b></span></button>
  </div>
</div>
